<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <h:form id="userHabilidadesEspectativasListForm">
        <p:panel header="Lista Hablidades-Espectativas" style="border: none; width: 99%; margin: 0 auto;">
            <p:growl id="message" life="3000" showDetail="true" />
            <p:dataTable id="datalist2" value="#{userHabilidadesEspectativasController.itemsHabExp}" var="item"
                        
                         selection="#{userHabilidadesEspectativasController.seleccion}"
                         resizableColumns="true"
                         paginator="true"
                         paginatorPosition="bottom"
                         rowKey="#{item.userHabilidadesEspectativasPK}"
                         rows="5"

                         >
                <p:ajax event="rowSelect" listener="#{userHabilidadesEspectativasController.mostrar()}"   update="editButton deleteButton"/>
                <p:ajax event="rowUnselect" listener="#{userHabilidadesEspectativasController.deselecionar}" update="editButton deleteButton"/>
                <p:columnGroup type="header">
                    <p:row>
                        <p:column colspan="2" headerText="HABILIDADES" />
                        <p:column colspan="2" headerText="ESPECTATIVAS" />
                        <p:column  headerText="ACCIONES" />
                    </p:row>
                    <p:row>
                        <p:column width="10%" headerText="AREA" />
                        <p:column width="20%" headerText="DESCRIPCION" />
                        <p:column width="10%" headerText="AREA" />
                        <p:column width="20%" headerText="DESCRIPCION" />
                        <p:column width="10%" headerText="" />
                    </p:row>


                </p:columnGroup>
                <p:column>
                    <h:outputText value="#{item.habilidades.nombre}"/>
                </p:column>
                <p:column >
                    <h:outputText value="#{item.descripcionHabilidad}"/>
                </p:column>
                <p:column >
                    <h:outputText value="#{item.espectativas.nombre}"/>
                </p:column>
                <p:column >
                    <h:outputText value="#{item.descripcionEspectativas}"/>
                </p:column>
                <p:column>
                    <p:commandButton id="editButton"
                                     value="Editar"
                                     icon="ui-icon-pencil"
                                     update=":userHabilidadesEspectativasListForm,
                                     :userHabilidadesEspectativasCreateForm:habilidad,
                                     :userHabilidadesEspectativasCreateForm:espectativa,
                                     :userHabilidadesEspectativasCreateForm:descripcione,
                                     :userHabilidadesEspectativasCreateForm:descripcionh"
                                     >
                        <f:setPropertyActionListener target="#{userHabilidadesEspectativasController.selected}" value="#{item}" />
                    </p:commandButton>
                    <p:commandButton id="deleteButton"
                                     value="Eliminar"
                                     icon="ui-icon-close"
                                     actionListener="#{userHabilidadesEspectativasController.eliminar(event, item)}"
                                     update=":userHabilidadesEspectativasListForm:datalist2,
                                     :userHabilidadesEspectativasListForm:message">
                        <p:confirm header="Confirmacion" message="Esta Seguro que desea eliminar?" icon="ui-icon-alert" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </p:panel>
        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
            <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" ajax="false" icon="ui-icon-check" />
            <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:confirmDialog>
    </h:form>
    <ui:include src="editar.xhtml"/>
</ui:composition>
